<template>
	<view>
		<view class="margin">
			倒计时：{{dataTime}}
		</view>
		<view>
			<image :src="examData.img" mode="" style="width: 200rpx;height: 200rpx;" class="margin-left"></image>
			<view class="flex padding">
				<view style="background: #3F62FB;width: 100rpx;height: 30rpx;" class="text-white text-sm rowsc align-center margin-right-sm">
					<text v-if="examData.text_type ==1">
						选择
					</text>
					<text v-if="examData.text_type ==2">
						判断
					</text>
					<text v-if="examData.text_type ==3">
						多选
					</text>
				</view>
				<view class="text-black">
					{{examData.title}}
					<!-- 答案 -->
				</view>
			</view>
			<view class=" padding text-red margin-top" v-if="examDataInfo">
				<view>
					正确答案 : 选项
					<text class="text-bold text-lg margin-left">
						{{examData.answer}}
					</text>
				</view>
				<view>
					<rich-text :nodes="examData.sub_title"></rich-text>
				</view>
			</view>
			<!-- 1 3选择 -->
			<view class="padding" v-if="examData.text_type ==1 || examData.text_type == 3">
				<view class="flex align-center padding-bottom" v-for="(item,index) in titleSelectData" @click="judgeMen1(index,item)">
					<view class="round rowsc align-center" style="border: 1rpx solid #000;width: 50rpx;height: 50rpx;" :class="{examData_bg:item.id==numdata}">
						<text :class="{examData_bg:item.id==numdata}" class="text-white">√</text>
					</view>
					<view class="margin-left-sm" :class="{examData_color:item.id==numdata}">
						{{item.ans_title}}
					</view>
				</view>
			</view>
			<!-- 2是判断 -->
			<view class="padding" v-if="examData.text_type ==2">
				<view class="flex align-center padding-bottom" v-for="(item,index) in titleJudgeList" @click="judgeMen(index)">
					<view class="round rowsc align-center" style="border: 1rpx solid #000;width: 50rpx;height: 50rpx;" :class="{judge_bg:index==nums}">
						{{item.name}}
					</view>
					<view class="margin-left-sm" :class="{judge_color:index==nums}">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="submit_bottom">
			<view class="flex justify-end margin-right">
				<view class="text-white round margin-right" style="padding: 10rpx 25rpx;background-color: #B4B4B4;" @click="upTopic('shang')">
					上一题
				</view>
				<view style="border: 1rpx solid #000; padding: 10rpx 25rpx;" class="round rowsc align-center" @click="upTopic('xia')"
				 v-if="!examDataInfo">
					下一题
				</view>
				<view style="border: 1rpx solid #000; padding: 10rpx 25rpx;" class="round rowsc align-center" v-else>
					下一题{{count}}
				</view>
			</view>
			<view class="bg-white solid-top rowsb padding-sm margin-top">
				<view class="text-white round text-center" style="padding: 10rpx 25rpx;background-color: #007AFF;" @click="scoreMen">
					交卷
				</view>
				<view class="align-center">
					<view class="align-center">
						<view style="background: #27CA73;height: 30rpx;width: 30rpx;" class="round rowsc align-center text-sm text-white">
							√
						</view>
						<view class="margin-left-sm">{{examDataPush1.length}}</view>
					</view>
					<view class="align-center margin-left">
						<view style="background: #FC3E47;height: 30rpx;width: 30rpx;" class="round rowsc align-center text-sm text-white">
							X
						</view>
						<view class="margin-left-sm">{{examDataPush2.length}}</view>
					</view>
					<view class="margin-left-xl align-center">
						<view class="bg-gray margin-right-xs" style="height: 30rpx;width: 30rpx;">

						</view>
						<view class="">
							{{pageData+1}}/{{examDataList.length}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		examTopic,
		examjudge,
		submitScore
	} from '@/common/path.js'
	export default {
		data() {
			return {
				examDataList: [],
				examDataInfo: false, //判断是否显示 正确答案
				examDataPush1: [], //正确答案数量
				examDataPush2: [], //错误答案数量
				pageData: 0,
				examData: {},
				titleSelectData: [],
				titleJudgeList: [{
						name: 'A',
						'title': '对'
					},
					{
						name: 'B',
						'title': '错'
					}

				],
				nums: 99,
				dataTime: '39:59',
				dataTimes: '2400000',
				numdata: 0,
				dateShiJian: '', //考试的时间
				count: 3,
				examList: [],
				topicData: [], //已经回答过的题
			}
		},
		onLoad() {
			this.examTopic()
			this.timeMen()
		},
		methods: {
			//提交成绩
			scoreMen() {
				let that = this
				let content;
				if (this.examDataPush2.length + this.examDataPush1.length == this.examDataList.length) {
					content = '是否交卷？'
				} else {
					content = '是否提前交卷？'
				}
				uni.showModal({
					title: '温馨提示',
					content: content,
					success: function(Res) {
						if (Res.confirm) {
							that.submitScore()
						} else if (Res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			submitScore() {
				let data = {
					uid: app.userInfo.id,
					type: 1, //科目类型
					time: '40',
					score: this.examDataPush1.length
				}
				this.$axios.axios('POST', submitScore, data)
					.then(res => {
						console.log('', res);
						if (res.status == 1) {
							this.$tools.showToast('提交成功')
							setTimeout(r => {
								this.$tools.navigateBack()
							}, 1000)
						} else {
							this.$tools.showToast('提交失败')
						}
					})
					.catch(err => {
						console.log(err);
						this.$tools.showToast('网络异常')
					})
			},


			//30秒倒计时
			timeMen() {
				let dateShiJian = 1000;
				let IntervTime, dataTime, dataTime2, one, two;
				IntervTime = setInterval(r => {
					dateShiJian += 1000;
					dataTime = this.dataTimes - dateShiJian
					dataTime2 = dataTime / 1000
					one = parseInt(dataTime2 / 60);
					two = dataTime2 % 60;
					if (dateShiJian >= 2400000) {
						dateShiJian = 2400000
					} else {
						var minute = dateShiJian
						// console.log("需要传给后台的时间戳======>",minute)
						this.dateShiJian = dateShiJian
					}
					if (dataTime2 / 60 == '0') one = '00';
					if (parseInt(dataTime2 / 60).toString().length == '1') one = '0' + parseInt(dataTime2 / 60);
					if ((dataTime2 % 60).toString().length == '1') two = '0' + dataTime2 % 60;
					if (Number(one) < 1 && Number(two) < 1) {
						this.dataTime = '00' + ':' + '00'
						clearInterval(IntervTime)
					} else {
						this.dataTime = one + ':' + two
					}

				}, 1000)
			},
			//考试判断
			examjudge() {
				let data = {
					id: this.examData.id,
					type: this.examData.text_type,
					answer: this.numdata,
					uid: app.userInfo.id
				}
				this.$axios.axios("POST", examjudge, data)
					.then(res => {
						let topData = {
							title: this.examDataList[this.pageData].title,
							sub_title: this.examDataList[this.pageData].sub_title,
							id: this.examDataList[this.pageData].id,
							list: this.examDataList[this.pageData].list,
							numdata: this.numdata
						}
						this.topicData.push(topData)
						console.log('已经回答过的题目', this.topicData)
						if (res.status == -1) {
							this.answer2(res)
						} else {
							this.answer(res)
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			//回答错误的时候调用
			answer2(res) {
				this.getCode() //倒计时
				this.examDataInfo = true
				this.$tools.showToast('回答错误')
				this.examDataPush2.push(res) //错
				setTimeout(r => {
					this.numdata = 0 //选择状态归0
					this.show = true;
					this.pageData++ //下一题
					this.examDataInfo = false //判断是否显示正确答案
					this.examData = this.examDataList[this.pageData]
					console.log('numdatanumdatanumdatanumdata', this.numdata)
					clearInterval(this.timer);
					this.timer = null;
				}, 3000)
				// console.log('错题数', this.examDataPush2)
			},
			//回答错误调用
			answer(res) {
				this.$tools.showToast('回答正确')
				this.numdata = 0 //选择状态归0
				this.examDataPush1.push(res.status)
				this.pageData++ //下一题
				this.examData = this.examDataList[this.pageData]
			},

			//选择
			judgeMen(index) {
				let topicData_id;
				this.topicData.forEach(item => {
					if (item.id == this.examDataList[this.pageData].id) {
						topicData_id = item.id
					} else {}
				})
				if (topicData_id == this.examDataList[this.pageData].id) {
					this.$tools.showToast('您已经选择过了！！')
				} else {
					let that = this
					that.nums = index
					that.numdata = index + 1
				}
			},
			judgeMen1(index, item) {
				let topicData_id;
				this.topicData.forEach(item => {
					if (item.id == this.examDataList[this.pageData].id) {
						topicData_id = item.id
					} else {}
				})
				if (topicData_id == this.examDataList[this.pageData].id) {
					this.$tools.showToast('您已经选择过了！！')
				} else {
					this.numdata = item.id
				}
				console.log(item.id)
			},
			//题
			upTopic(event) {
				if (event == 'shang') {
					console.log('第几题==>', this.pageData);
					if (this.pageData < 1) {
						this.$tools.showToast('请从第一题开始！')
					} else {
						this.pageData--
						this.numdata = this.topicData[this.pageData].numdata
						console.log('numdatanumdatanumdata', this.numdata)
						this.examData = this.examDataList[this.pageData]
						console.log('上一题的内容=====>', this.examData)
					}
				} else if (event == 'xia') { //如果点了下一题
					let topicData_id;
					this.topicData.forEach(item => {
						if (item.id == this.examDataList[this.pageData].id) {
							topicData_id = item.id
						}
					})
					if (topicData_id == this.examDataList[this.pageData].id) {
						this.numdata = this.topicData[this.pageData].numdata
						this.pageData++
						this.examData = this.examDataList[this.pageData]
					} else {
						if (this.numdata == 0) { //如果没有选择答案
							this.$tools.showToast('请选择')
						} else {
							console.log(this.numdata)
							this.examjudge() //判断
						}
					}
				}
			},

			upTopic1() {
				this.examData = this.examDataList[this.pageData]
				this.titleSelectData = this.examData.list
			},


			//倒计时
			getCode() {
				const TIME_COUNT = 3;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count -= 1;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
			examTopic() {
				this.$axios.axios("POST", examTopic, {
						id: 1,
					})
					.then(res => {
						if (res.status == 1) {
							this.examDataList = res.data
							this.upTopic()
							this.upTopic1()
						}
					})
					.catch(err => {})
			}
		}
	}
</script>

<style>
	.submit_bottom {
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		right: 0;
	}

	page {
		background-color: #FFFFFF;
	}

	.judge_bg {
		color: white;
		background-color: #999999;
		border: 1rpx solid #999999 !important;
	}

	.judge_color {
		color: gray;
	}

	.examData_bg {
		background-color: #999999;
		border: 1rpx solid #999999;
	}
</style>
